import React, {useState, useEffect} from'react';
import { NavBar, Button, Toast,  } from 'antd-mobile';
import { AntOutline, RightOutline } from 'antd-mobile-icons'
import styles from '../../css/Wyx/waichu.module.css' 
import { useNavigate } from 'react-router-dom';
import axios from 'axios'
import Tar from '../../hooks/Appso'
// 待办事项-外出登记页面
function LiShi() {
    const navigate = useNavigate();
    let [accessToken, setaccessToken] = useState(JSON.parse(localStorage.getItem('accessToken')) || "")
    const [data, setData] = useState([])
    const getList = () => {
        axios.get(`http://127.0.0.1:3000/xin/list`, {
            headers: {
              'Authorization': accessToken
            }
          }).then(res=>{
            if(res.data.code===200){
                setData(res.data.result)
            }
        },
        {
            headers: {
              'Authorization': accessToken
            }
        })
    }
    useEffect(()=>{
        getList()
    },[])

    return (
        <div>
            <NavBar style={{backgroundColor: "#6a7d8f", color: "white", height: "6rem"}}>历史任务</NavBar>
            <p style={{lineHeight: "5rem", marginLeft: "1rem"}}>已完成任务</p>
          
            {/* 外出任务 */}
            <div > 
                {
                    data.map((item, index) => {
                        return (
                            // 任务列表
                            <div className={styles.card} key={index}>
                                {/* 顶部标题 */}
                                <p style={{lineHeight:"5rem", fontSize:"1.6rem", marginLeft: "1rem"}}>
                                    {item.wandate} 
                                    <span style={{fontSize: "1.4rem", color: "#a1aac2"}}> {item.wanweek}</span>   
                                </p>
                                <div className={styles.title} onClick={()=>{navigate('/lishixiangqing?id='+item._id)}}>
                                    <div className={styles.titleTextLeft}>
                                        <h4>{item.title}</h4>
                                    </div>
                                    <div className={styles.titleTextRight}>
                                        测量完成 <RightOutline />
                                    </div>
                                </div>
                                {/* 中间内容 */}
                                <div className={styles.content} style={{backgroundColor: 'white'}}>
                                    <div> 
                                        <div className={styles.shang}> 
                                            <div className={styles.shang1}>
                                                <div>发布日期</div>
                                                <div style={{fontSize: "1.7rem", color: "black"}}>{item.fabudate}</div>
                                            </div>
                                            <div className={styles.shang2}>
                                                <div className={styles.shang21}>
                                                    <div>测量日期</div>
                                                    <div style={{fontSize: "1.7rem", color: "black"}}>{item.celiangdate}</div>
                                                </div>
                                                <div className={styles.shang22}>
                                                    {item.celiangtime}
                                                </div>
                                            </div>
                                        </div>
                                        <div style={{marginTop: "1rem"}}>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>客户</span>
                                                <span style={{width: "15rem", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                                                    <span>{item.kehu} </span>
                                                    {item.kehuphone} 
                                                    <img src='/img/phone.png' style={{width: "2rem"}} alt="" />
                                                </span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>导购</span>
                                                <span style={{width: "15rem", display: "flex", justifyContent: "space-between", alignItems: "center"}}>
                                                    <span>{item.daogou} </span>
                                                    {item.daogouphone} 
                                                    <img src='/img/phone.png' style={{width: "2rem"}} alt="" />
                                                </span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>测量地址</span>
                                                <span>{item.address}</span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>确认预约日期</span>
                                                <span>{item.yuyuedate}</span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>外出登记时间</span>
                                                <span>{item.waichudate}</span>
                                            </p>
                                            <p style={{display: "flex", justifyContent: "space-between", lineHeight: "3rem"}}>
                                                <span>工价</span>
                                                <b style={{color: 'red'}}>￥{item.price}</b>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                {/* 底部按钮 */}
                                <div className={styles.footer}>
                                    <Button style={{border: "0.1rem solid black"}} color='default' onClick={() => {
                                        Toast.show('点击了删除任务')
                                    }}>
                                        删除任务
                                    </Button>
                                    <Button style={{backgroundColor: "white"}} color='primary' fill='outline' onClick={() => {
                                        // Toast.show('点击了查看评价')
                                        navigate('/pingjia')
                                    }}>
                                        查看评价
                                    </Button>
                                
                                </div>
                            </div>
                        )

                    })
                }
            </div>
                <Tar></Tar>
        </div>
    )
}

export default LiShi;